<template>
  <div class="lists">
    <!-- 头部 -->
    <div class="header1">分类</div>
    <div class="search">
      <span class="iconfont icon1">&#xe637;</span>
      <input type="text" placeholder="按内容搜索" />
    </div>
    <!-- 主体 -->
    <div class="main1">
      <div class="left">
        <van-sidebar
          v-model="activeKey"
          style="width: 2.36rem"
          @change="onChange"
        >
          <van-sidebar-item
            :title="item.catename"
            v-for="item in lists"
            :key="item.id"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <v-listcard :props="secondArr" @goodInfo="goodInfo"></v-listcard>
      </div>
    </div>
    <v-nav></v-nav>
  </div>
</template>

<script>
import vListcard from "../vListcard";
import vNav from "../vNav";
import { getCate, getGoodsinfo, getCateTree } from "../util/axios";
export default {
  components: {
    vNav,
    vListcard,
  },
  data() {
    return {
      lists: [],
      activeKey: 0,
      secondId: 0,
      secondArr: [],
    };
  },
  mounted() {
    getCateTree().then((res) => {
      if (res.code == 200) {
        let list = res.list ? res.list : [];
        this.lists = list;
        this.secondArr = list[this.activeKey].children;
        // console.log(res);
      }
    });
  },
  methods: {
    onChange() {
      this.secondArr = this.lists[this.activeKey].children;
    },
    goodInfo(e) {
        this.$router.push("/card/"+e);
    
    },
  },
};
</script>

<style src="../../assets/css/list.css" scoped >
/* @import "../assets/css/list.css"; */
</style>